<template>
    <el-dialog v-model="dialogVisible" title="告警处理详情" width="700px" :destroy-on-close="true"
        class="alarm-detail-dialog">
        <div v-loading="loading" class="alarm-detail-container">
            <!-- 告警基本信息 -->
            <el-card class="detail-card">
                <template #header>
                    <div class="header-title">
                        <span>告警信息</span>
                        <el-tag :type="getStatusType(currentAlarm?.status)" effect="dark" size="small">
                            {{ getStatusText(currentAlarm?.status) }}
                        </el-tag>
                    </div>
                    <span class="alarm-time">{{ currentAlarm?.time }}</span>
                </template>
                <div class="alarm-info">
                    <div class="info-item">
                        <span class="label">告警名称：</span>
                        <span>{{ currentAlarm?.title }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">告警位置：</span>
                        <span>{{ currentAlarm?.location }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">告警类型：</span>
                        <span>{{ currentAlarm?.type }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">告警级别：</span>
                        <span>
                            <el-tag :type="getSeverityType(currentAlarm?.severity)" size="small">
                                {{ currentAlarm?.severityText }}
                            </el-tag>
                        </span>
                    </div>
                    <div v-if="currentAlarm?.value" class="info-item">
                        <span class="label">告警值：</span>
                        <span>{{ currentAlarm?.value }}</span>
                    </div>
                    <div v-if="currentAlarm?.location" class="info-item">
                        <span class="label">地点：</span>
                        <span>{{ currentAlarm?.location }}</span>
                    </div>
                </div>
            </el-card>

            <!-- 处理信息 -->
            <el-card class="detail-card" v-if="currentAlarm?.status === 2 || currentAlarm?.status === 3">
                <template #header>
                    <span>处理信息</span>
                    <span class="process-time">{{ formatTime(currentAlarm?.updated_at) }}</span>
                </template>
                <div class="process-info">
                    <div class="info-item">
                        <span class="label">处理人：</span>
                        <span>{{ processorInfo?.real_name || '未知' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">处理说明：</span>
                        <div class="description">{{ currentAlarm?.info || '无' }}</div>
                    </div>
                </div>
            </el-card>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import dayjs from 'dayjs'
import { getUserListApi } from '@/api/user'

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    currentAlarm: {
        type: Object,
        default: () => null
    }
})

const emit = defineEmits(['update:visible', 'close'])

// 本地状态管理
const dialogVisible = ref(props.visible)
const loading = ref(false)
const processorInfo = ref(null)

// 监听外部visible变化
watch(() => props.visible, (newVal) => {
    dialogVisible.value = newVal
    if (newVal && props.currentAlarm?.user_id) {
        fetchProcessorInfo(props.currentAlarm.user_id)
    }
})

// 监听currentAlarm变化
watch(() => props.currentAlarm, (newVal) => {
    if (newVal?.user_id && dialogVisible.value) {
        fetchProcessorInfo(newVal.user_id)
    }
}, { deep: true })

// 监听内部dialogVisible变化
watch(() => dialogVisible.value, (newVal) => {
    emit('update:visible', newVal)
    if (!newVal) {
        emit('close')
    }
})

// 获取处理人信息
const fetchProcessorInfo = async (userId) => {
    try {
        loading.value = true
        const res = await getUserListApi({ uid: userId })
        if (res.results && res.results.length > 0) {
            processorInfo.value = res.results[0]
        }
    } catch (error) {
        console.error('获取处理人信息失败:', error)
    } finally {
        loading.value = false
    }
}

// 获取状态对应的类型
const getStatusType = (status) => {
    switch (status) {
        case 1: return 'danger'  // 未处理
        case 2: return 'success' // 已处理
        case 3: return 'info'    // 已忽略
        default: return 'info'
    }
}

// 获取状态对应的文本
const getStatusText = (status) => {
    switch (status) {
        case 1: return '未处理'
        case 2: return '已处理'
        case 3: return '已忽略'
        default: return '未知状态'
    }
}

// 获取告警级别对应的类型
const getSeverityType = (severity) => {
    switch (severity) {
        case 1: return 'danger'  // 严重
        case 2: return 'warning' // 警告
        case 3: return 'info'    // 提示
        default: return 'info'
    }
}

// 格式化时间
const formatTime = (time) => {
    if (!time) return ''
    return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}
</script>

<style scoped>
.alarm-detail-container {
    max-height: 70vh;
    padding-right: 8px;
}

.detail-card {
    margin-bottom: 16px;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.alarm-time,
.process-time {
    font-size: 12px;
    color: var(--el-text-color-secondary);
}

.alarm-info,
.process-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-item {
    display: flex;
    align-items: flex-start;
}

.info-item .label {
    width: 80px;
    color: var(--el-text-color-secondary);
    flex-shrink: 0;
}

.description {
    flex: 1;
    white-space: pre-line;
}
</style>